<template>
    <div>
        <router-view></router-view>
        <!--在router里定义子路由组件，在该父组件中指定子路由的显示位置router-view-->

        <div class="tabbar">
            <van-tabbar v-model="active">
                <van-tabbar-item name="device" icon="home-o">设备</van-tabbar-item>
                <van-tabbar-item name="sheet" icon="search">工单</van-tabbar-item>
                <van-tabbar-item name="staff" icon="friends-o" v-if="role === 1 || role === 0">人员</van-tabbar-item>
                <!--只有boss和leader才可以看到人员页面-->
                <van-tabbar-item name="mine" icon="setting-o">我的</van-tabbar-item>
            </van-tabbar>
        </div>
    </div>
</template>

<script>
export default {
    name: "TabBar",

    data() {
        return {
            role: JSON.parse(sessionStorage["role"]),
            active: 'device',  //通过索引值来匹配（按顺序，从0 - 3）
        }
    },

    watch: {
        active: {
            handler() {
                if (this.active === 'device') this.$router.push('/facility');
                else if (this.active === 'sheet') this.$router.push('/worksheet');
                else if (this.active === 'staff') this.$router.push('/staff');
                else if (this.active === 'mine') this.$router.push('/mine');
            }
        }
    },

    mounted() {
        this.$router.push('/facility');
    }
}
</script>

<style scoped>
::v-deep .van-tabbar{  /*用深度选择器 设置不被遮挡*/
    z-index: 1000
}
</style>
